<template>
  <div class="score-show" @mouseover="ishover=true" @mouseleave="ishover=false">
    <div class="qHead">
      <span v-if="isNess" style="color:red">*</span>
      <span v-if="no!=0" class="font">{{no}}.</span>
      <span class="font">{{showtitle()}}</span>
    </div>
    <div>
      <span class="content">{{showuptext()}}</span>
      <el-radio-group>
        <el-radio v-for="item in options" :label="item.score" disabled="true">{{item.score}}</el-radio>
      </el-radio-group>
      <span class="content">{{showfinaltext()}}</span>
    </div>
    <el-row v-if="ishover" >
      <question-pos-edit
        @edit="edit"
        @copy="copy"
        @deleteQ="deleteQ"
        @moveup="moveup"
        @movedown="movedown"
        @movetop="movetop"
        @movebottom="movebottom"
      >
      </question-pos-edit>
    </el-row>
    <el-row v-else>
    </el-row>
  </div>
</template>

<script>
import QuestionPosEdit from '../QuestionPosEdit.vue'
export default {
  name:'ScoreShow',
  components: {
    QuestionPosEdit,
  },
  data(){
   return {
     ishover: true,
   }
  },
  props: {
    isNess: {
      type: Boolean,
      default: true,
    },
    no: {
      type: Number,
      default: 2,
    },
    title: {
      type: String,
      default: '标题'
    },
    options: {
      type: Array,
      default: []
    },
  },
  methods: {
    edit() {
      this.$emit('edit')
    },
    copy() {
      this.$emit('copy')
    },
    deleteQ() {
      this.$emit('deleteQ')
    },
     moveup() {
      this.$emit('moveup')
    },
    movedown() {
      this.$emit('movedown')
    },
    movetop() {
      this.$emit('movetop')
    },
    movebottom() {
      this.$emit('movebottom')
    },
    showtitle(){
      if(this.title == null || this.title == ''){
        return '题目'
      }else {
        return this.title
      }
    },
    showuptext() {
      if(this.options.length == 0){
        return ''
      }
      else 
        return this.options[0].text
    },
    showfinaltext() {
      if(this.options.length == 0){
        return ''
      }
      else 
        return this.options[this.options.length-1].text
    }
  },
}
</script>

<style scoped>
  .score-show {
    padding: 20px 50px;
    border-bottom: 2px solid gainsboro;
    padding-bottom: 45px;
  }

  .score-show:hover {
    box-shadow: 0 -4px 8px rgba(0,0,0,0.12),0 4px 8px rgba(0,0,0,0.04)  
  }

  .font {
    font-size: 16px;
    font-weight: bold;
    margin-left: 3px;
  }

  .el-row {
    margin-top: 5px;
    float: right;
    min-height: 30px;
  }

  .content {
    font-weight: bold;
  }

  .el-radio-group {
    margin: 10px 10px;
  }
  
</style>
